<template>
	<view>
		<view class="addr-wrapper" @click="addrClic">
			<view class="addr-detail">
				<view class="name-and-mobile" v-if="'id' in addr_item">
					<image src="/static/user/icon9@2x.png" mode=""></image>
					<text class="name">收货人：{{addr_item.name}}</text>
					<text class="mobile">{{addr_item.mobile}}</text>
				</view>
				<view class="addr-info">
					<text>收货地址:{{ 'address' in addr_item ? $db.getAddrById(addr_item.area_id) + ' ' + addr_item.address : '请选择地址' }}</text>
				</view>
			</view>
			<image class="addr-right" src="/static/public/more@2x.png" mode=""></image>
			<image class="addr-bottom" src="/static/submit-order/tiao@2x.png" mode=""></image>
		</view>
		<view class="shop-head">
			<image src="/static/public/dianp@2x.png" mode=""></image>
			<text class="title">Musn's</text>
		</view>
		<view class="shop-detail-wrapper">
			<image :src="goods_img" mode="aspectFill"></image>
			<view class="name-and-price">
				<text class="name">{{ name }}</text>
				<text class="price">￥{{price}}</text>
			</view>
			<!-- <text class="nums">×1</text> -->
		</view>
		<view class="card-list">
			<picker class="" :range="picker_range_array.gender" @change="genderChange">
				<view class="card-item">
					<view class="left">
						<text>性别</text>
					</view>
					<view class="right">
						<text>{{gender}}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<view class="card-item">
				<view class="left">
					<text>身高(cm)</text>
				</view>
				<view class="right">
					<input type="number" value="" placeholder="请输入您的身高" v-model="user_height" />
				</view>
			</view>
			<view class="card-item">
				<view class="left">
					<text>体重(kg)</text>
				</view>
				<view class="right">
					<input type="number" value="" placeholder="请输入您的体重" v-model="user_weight" />
				</view>
			</view>
			<picker class="" :range="picker_range_array.exercise" @change="chekeIsExercise">
				<view class="card-item">
					<view class="left">
						<text>是否健身</text>
					</view>
					<view class="right">
						<text>{{user_is_exercise}}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" :range="demand_value_list" @change="checkDemand">
				<view class="card-item">
					<view class="left">
						<text>需求</text>
					</view>
					<view class="right">
						<text>{{user_check_demand.type_name}}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="date" :start="tomorrow" :end="end_day" @change="checkStartDay">
				<view class="card-item">
					<view class="left">
						<text>计划开始时间</text>
					</view>
					<view class="right">
						<text>{{check_day}}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="time" @change="checkWuTime" :value="check_wu_time">
				<view class="card-item">
					<view class="left">
						<text>午餐预约时间</text>
					</view>
					<view class="right">
						<text>{{check_wu_time}}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="time" @change="checkWanTime" :value="check_wan_time">
				<view class="card-item">
					<view class="left">
						<text>晚餐预约时间</text>
					</view>
					<view class="right">
						<text>{{check_wan_time}}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
		</view>

		<view class="card-list">
			<view class="card-item" @click="check_coupon">
				<view class="left">
					<text>优惠</text>
				</view>
				<view class="right">
					<text v-if="!('id' in this.coupon_item)">{{coupon_num > 0 ? '有可用优惠券' : '暂无可用'}}</text>
					<text v-else>满{{coupon_item.full_money}}减{{coupon_item.jian_money}}</text>
					<image src="../../static/public/more@2x.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="card-list">
			<view class="card-item">
				<view class="left">
					<text>配送方式</text>
				</view>
				<view class="right">
					<text>同城快递</text>
				</view>
			</view>
			<view class="card-item" @click="openFoodNeeds">
				<view class="left">
					<text>填写需求</text>
				</view>
				<view class="right">
					<text v-if="message == '' && check_material_ids.length <= 0">未填写</text>
					<text v-else>已填写</text>
					<image src="../../static/public/more@2x.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="card-list shop-price-wrapper">
			<view class="card-item">
				<view class="left">
					<text>商品金额<br>运费</text>
				</view>
				<view class="right">
					<text>￥{{price}}<br>+￥0.00</text>
				</view>
			</view>
		</view>

		<view class="bottom-wrapper">
			<text class="total" v-if="!('id' in this.coupon_item)">合计:￥{{Number(price).toFixed(2)}}</text>
			<text class="total" v-else>合计:￥{{(Number(price)- coupon_item.jian_money).toFixed(2)}}<text class="del-price">{{Number(price).toFixed(2)}}</text></text>
			<text class="btn" @click="lowerOrder">提交订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, //周期购id
				picker_range_array: {
					gender: ['男性', '女性'],
					exercise: ['是', '否'],
				},
				gender: '男性', //性别
				demand_key_list: [],
				demand_value_list: [],
				user_check_demand: {},
				tomorrow: '',
				end_day: '',

				name: '', //周期购商品名称
				plan_desc: '', //商品介绍
				price: 0, //商品价格
				goods_img: '', //商品图片
				addr_item: {}, //用户选择的地址
				user_height: '', //用户的身高
				user_weight: '', //用户的体重
				user_is_exercise: '否', //用户是否健身
				check_material_ids: [], //用户选择的备注食材
				message: '', //用户的留言
				check_day: '', //用户的预约时间
				check_wu_time: '12:00', //午餐预约时间
				check_wan_time: '18:00', //晚餐预约时间
				coupon_num: 0, //可用优惠券的数量
				coupon_item: {} //选择的优惠券
			};
		},
		onLoad(o) {
			this.id = o.id;
		},
		mounted() {
			let date = new Date();
			this.tomorrow =
				`${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().length == 1 ? '0' + (date.getUTCMonth() + 1) : (date.getUTCMonth() + 1)}-${(date.getDate() + 1).toString().length == 1 ? '0' + (date.getDate() + 1) : (date.getDate() + 1)}`;
			console.log(this.tomorrow);
			this.check_day = this.tomorrow;
			date = new Date(date.getTime() + 30 * 24 * 3600 * 1000);
			this.end_day =
				`${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().length == 1 ? '0' + (date.getUTCMonth() + 1) : (date.getUTCMonth() + 1)}-${(date.getDate() + 1).toString().length == 1 ? '0' + (date.getDate() + 1) : (date.getDate() + 1)}`;
			this.getData();
			this.getCoupon();
		},
		methods: {
			getData: function() {
				// 获取周期购详情
				this.$api.cycleInfo({
						id: this.id
					})
					.then(res => {
						// console.log(res);
						this.name = res.data.name;
						this.plan_desc = res.data.plan_desc
						this.price = res.data.price
						this.goods_img = res.data.detail_cover
					})
				// 获取下单需求列表
				this.$api.orderDemand()
					.then(res => {
						// console.log(res);
						this.demand_list = res.data;
						for (let v of res.data) {
							this.demand_key_list.push(v.id)
							this.demand_value_list.push(v.type_name)
						}
						this.user_check_demand = {
							id: this.demand_key_list[0],
							type_name: this.demand_value_list[0]
						}
					})
				// 获取用户默认地址
				this.$api.getUserDefaultAddr()
					.then(res => {
						// console.log(res);
						this.addr_item = res.data
					})
			},
			getCoupon: function() {
				// 获取可用优惠券数量
				this.$api.requestCoupon({
						order_id: this.id
					})
					.then(res => {
						// console.log(res);
						this.coupon_num = res.data.length
					})
			},
			addrClic: function() {
				// 选择地址
				uni.$once('chack_addr', res => {
					if (!res.data) {
						return false;
					}
					this.addr_item = res.data;
					this.$db._GoBack();
				})
				this.$db._NavTo('addressList_page')
			},
			genderChange: function(value) {
				this.gender = this.picker_range_array.gender[value.detail.value]
			},
			chekeIsExercise: function(v) {
				// 用户选择是否健身
				this.user_is_exercise = this.picker_range_array.exercise[v.target.value]
			},
			checkDemand: function(value) {
				// 用户选择需求
				this.user_check_demand = {
					id: this.demand_key_list[value.detail.value],
					type_name: this.demand_value_list[value.detail.value]
				}
			},
			checkStartDay: function(v) {
				// 用户选择计划开始时间
				console.log(v);
				this.check_day = v.target.value
			},
			checkWuTime: function(v) {
				// 用户选择午餐时间
				console.log(v);
				this.check_wu_time = v.target.value
			},
			checkWanTime: function(v) {
				// 用户选择晚餐时间
				console.log(v);
				this.check_wan_time = v.target.value
			},
			check_coupon: function() {
				if (this.coupon_num <= 0) {
					this.$db._ShowToast('无可用优惠券')
					return false;
				}
				// 接收优惠券数据
				uni.$once('check_order_coupon', res => {
					if (!res.data) {
						return false
					}
					console.log(res.data);
					this.coupon_item = res.data
					this.$db._GoBack();
				})
				// 打开优惠券页面
				this.$db._NavTo('order_coupon_page', {
					order_id: this.id
				})
			},
			openFoodNeeds: function() {
				// 接收需求数据
				uni.$once('food_needs_submit', res => {
					if (!res.data) {
						return false
					}
					this.check_material_ids = res.data.check_material_ids;
					console.log(this.check_material_ids);
					this.message = res.data.message;
					this.$db._GoBack();
				})
				// 打开添加需求页面
				this.$db._NavTo('food_needs_page', {
					check_material_ids: JSON.stringify(this.check_material_ids),
					message: this.message
				})
			},
			lowerOrder: function() {
				// 下单
				if (!'id' in this.addr_item || !this.addr_item.id) {
					this.$db._ShowToast('请选择收货地址')
					return false;
				}
				if (!this.user_height) {
					this.$db._ShowToast('请输入您的身高')
					return false;
				}
				if (!this.user_weight) {
					this.$db._ShowToast('请输入您的体重')
					return false;
				}
				let day_arr = this.check_day.split('-')
				let date_day = new Date(Number(day_arr[0]), Number(day_arr[1]) - 1, Number(day_arr[2]), 0)

				let wu_arr = this.check_wu_time.split(':')
				let date_wu = new Date(1970, 0, 1, Number(wu_arr[0]) + 8, Number(wu_arr[1]), 0)

				let wan_arr = this.check_wan_time.split(':')
				let date_wan = new Date(1970, 0, 1, Number(wan_arr[0]) + 8, Number(wan_arr[1]), 0)
				// 下单
				this.$api.lowerOrder({
						goods_id: this.id,
						address_id: this.addr_item.id,
						coupon_id: '',
						sex: this.gender == '男性' ? 1 : 2,
						height: this.user_height,
						width: this.user_weight,
						width: this.user_weight,
						is_keep: this.user_is_exercise == '是' ? 1 : 2,
						cyclically_id: this.user_check_demand.id,
						material_id: this.check_material_ids,
						message: this.message,
						p_time: Math.round(date_day.getTime() / 1000),
						wu_time: Math.round(date_wu.getTime() / 1000),
						wan_time: Math.round(date_wan.getTime() / 1000),
						coupon_id: 'id' in this.coupon_item ? this.coupon_item.id : ''
					})
					.then(res => {
						// 支付
						this.$api.wxPay({
								ids: res.data.order_id
							})
							.then(ret => {
								if ('data' in ret && ret.data === 10059) {
									this.$db._ShowToast('下单成功', () => {
										this.$db._NavTo('submited-order-page', {
											order_id: res.data.order_id,
											type: 1
										}, this.$db.navToMethod[1]);
									})
								} else {
									this.$db._ShowToast('下单成功，正在跳转支付', () => {
										location.href = ret.data.url
									})
								}
							})
					})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
		padding-bottom: 90rpx;
	}

	.addr-wrapper {
		position: relative;
		padding: 38rpx 38rpx 60rpx;
		display: flex;
		background: #FAFAFA;

		.addr-detail {
			width: 100%;
			flex-shrink: 1;

			.name-and-mobile {
				display: flex;
				align-items: center;

				image {
					margin-right: 14rpx;
					width: 25rpx;
					height: 29rpx;
				}

				.name,
				.mobile {
					font-size: 28rpx;
					color: #252525;
				}

				.mobile {
					margin-left: auto;
				}
			}

			.addr-info {
				margin-top: 16rpx;
				margin-left: 39rpx;

				text {
					font-size: 24rpx;
					color: #616161;
				}
			}
		}

		.addr-right {
			flex-shrink: 0;
			margin: auto 0 auto 34rpx;
			width: 12rpx;
			height: 22rpx;
		}

		.addr-bottom {
			position: absolute;
			bottom: 20rpx;
			left: 0;
			width: 100%;
			height: 6rpx;
		}
	}

	.shop-head {
		padding: 18rpx 38rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;

		image {
			width: 26rpx;
			height: 23rpx;
		}

		text {
			margin-left: 14rpx;
			font-size: 28rpx;
			color: #494949;
		}
	}

	.shop-detail-wrapper {
		padding: 38rpx 40rpx;
		display: flex;
		background: #FAFAFA;

		image {
			width: 138rpx;
			height: 138rpx;
			border-radius: 10rpx;
		}

		.name-and-price {
			margin-left: 20rpx;
			display: flex;
			flex-flow: column;

			.name {
				font-size: 32rpx;
				color: rgba(37, 37, 37, 1);
			}

			.price {
				margin-top: auto;
				font-size: 28rpx;
				color: #252525;
			}
		}

		.nums {
			margin-top: auto;
			margin-left: auto;
			font-size: 28rpx;
			color: #252525;
		}
	}



	.card-list {
		margin: 20rpx 0;
		padding: 0 30rpx;
		background: #fff;

		picker+picker {
			.card-item {
				border-top: 1rpx solid #ECECEC;
			}
		}

		picker+.card-item {
			border-top: 1rpx solid #ECECEC;
		}
	}



	.card-item {
		padding: 24rpx 0;
		display: flex;
		background: #fff;

		&+.card-item {
			border-top: 1rpx solid #ECECEC;
		}

		&+picker {
			.card-item {
				border-top: 1rpx solid #ECECEC;
			}
		}

		text {
			font-size: 24rpx;
			line-height: 28rpx;
			color: rgba(39, 39, 39, 1);
		}

		.left {
			display: flex;
			align-items: center;

			image {
				margin-right: 10rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}

		.right {
			margin-left: auto;
			display: flex;
			align-items: center;

			text {
				margin-left: 20rpx;
				color: #999999;
			}

			image {
				margin-left: 20rpx;
				width: 12rpx;
				height: 22rpx;
			}

			input {
				margin-left: 50rpx;
				width: 282rpx;
				font-size: 22rpx;
				text-align: right;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.start-date-warpper {
		.right {
			text {
				margin-left: 0;
			}

			input {
				margin-left: 20rpx;
				margin-right: 10rpx;
				width: 60rpx;
				text-align: right;
				font-size: 24rpx;
			}
		}
	}

	.shop-price-wrapper {
		view:nth-child(1) {
			text {
				line-height: 41rpx;
			}

			.right {
				text-align: right;
			}
		}
	}



	.bottom-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		background: #FFFFFF;
		box-shadow: 0 0rpx 10rpx rgba(0, 0, 0, 0.5);

		.total {
			line-height: 90rpx;
			margin-left: auto;
			margin-right: 40rpx;

			.del-price {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
			}
		}

		.btn {
			display: block;
			height: 90rpx;
			width: 212rpx;
			text-align: center;
			line-height: 90rpx;
			background: #2F2F34;
			color: #FFFFFF;
		}
	}
</style>
